<script>
export default {
  name: "index",
  data() {
    return {
      detail: {},
      carNum: 0,
      goods_id: ''
    }
  },
  onShow() {
    this.carNum = uni.getStorageSync('carList').length
  },
  onLoad({ id }) {
    this.goods_id = id
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.goodsDetail({
        id: this.goods_id
      }).then(res => {
        // 收藏数量 如果大于collects的长度大于collect_count 则取collects的长度
        let collect_count = res.collect_count
        if (res.collects.length > collect_count) {
          collect_count = res.collects.length
        }
        // 查找是否已经收藏
        let collect_item = res.collects.find(item => item.member_id === uni.getStorageSync('userInfo').id)
        this.detail = {
          ...res,
          collect_count,
          collect_item,
          image: this.$baseUrl + res.image,
          remark: res.remark.replace('"/public/uploads/file/', `"${this.$baseUrl}/public/uploads/file/`)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    toCar() {
      this.$u.route({
        url: '/pages/car/car',
        type: 'switchTab'
      })
    },
    addCar() {
      const carList = uni.getStorageSync('carList') || []
      const index = carList.findIndex(item => item.goods_id === this.detail.id)
      if (index > -1) {
        carList[index].count++
      } else {
        carList.push({
          goods_id: this.detail.id,
          count: 1,
          buyChecked: false,
          deleteChecked: false,
        })
      }
      this.carNum = carList.length
      uni.setStorageSync('carList', carList)
    },
    buy() {
      uni.setStorageSync('buyList', [{
        ...this.detail,
        count: 1
      }])
      this.$u.route('/pages/createOrder/createOrder')
    },
    collectProduct() {
      if(this.detail.collect_item) {
        this.$api.deleteCollect({
          id: this.detail.collect_item.id
        }).then(res => {
         this.getDetail()
        })
      } else {
        this.$api.createCollect({
          goods_id: this.detail.id,
          member_id: uni.getStorageSync('userInfo').id
        }).then(res => {
          this.getDetail()

        })
      }
    }
  }
}
</script>

<template>
<div>
  <div class="detail-image">
    <u-image :src="detail.image" :height="500" mode="aspectFit"></u-image>
  </div>
  <u-line ></u-line>
   <div class="detail-box">
     <view class="demo-tag" v-if="detail.is_new === 0">
       <view class="demo-tag-owner">
         新品上架
       </view>
     </view>
      <div style="display: flex;align-items: center;justify-content: space-between">
        <view class="demo-title">
          {{detail.name}}
        </view>
        <u-icon
            @click="collectProduct"
            size="24px" :name="detail.collect_item ? 'star-fill' : 'star'" :color="detail.collect_item ? '#2aac34' : ''"></u-icon>
      </div>
      <view style="display: flex;align-items: center;justify-content: space-between">
        <view class="demo-price">
          ￥{{detail.price}}
        </view>
        <view class="demo-count">
          销量 {{detail.sale_count}}，收藏 {{ detail.collect_count }}，库存 {{ detail.store_count }}
        </view>
      </view>
      <view>

      </view>
     <u-gap height="20"></u-gap>
     <u-line ></u-line>
     <u-gap height="20"></u-gap>
     <u-section :font-size="36"  :show-line="false" title="商品介绍" :right="false"></u-section>
     <u-gap height="20"></u-gap>

     <u-line ></u-line>
    </div>

  <div style="padding: 0 20rpx">
    <u-parse :html="detail.remark"></u-parse>
  </div>
  <div class="goods-action">
    <div class="goods-icon" @click="toCar">
      <u-badge type="error" :count="carNum" :offset="[-10,-10]">
      </u-badge>
      <image src="@/static/car2.png" style="width: 40rpx;height: 40rpx"/>
      <div>购物车</div>
    </div>
    <div class="goods-btn1" v-if="detail.store_count" @click="addCar">加入购物车</div>
    <div class="goods-btn2" v-if="detail.store_count" @click="buy">立即购买</div>
    <div class="goods-btn3" v-if="!detail.store_count">库存不足</div>
  </div>
</div>
</template>

<style scoped lang="scss">
.goods-action {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  color: #FFFFFF;
  .goods-icon {
    position: relative;
    font-size: 28rpx;
    color: #646566;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    img {
      height: 36rpx;
      margin: 0 auto 2px;
    }
  }
  .goods-btn1 {
    width: 100%;
    margin-left: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    background: linear-gradient(to right, #ffd01e, #ff8917);
  }
  .goods-btn2 {
    width: 100%;
    margin-right: 5px;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: linear-gradient(to right, #ff6034, #ee0a24);
  }
  .goods-btn3 {
    width: 100%;
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    background: #999999;
    box-sizing: border-box;
    margin: 0 20px;
  }

}
.detail-image {
  background-color: #ffffff;
}
.detail-box {
  padding: 20rpx;
  background-color: #ffffff;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
  margin-bottom: 10px;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 10rpx 14rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 40rpx;
  color: #39b54a;
  margin-top: 5px;
}
.demo-count {
  font-size: 28rpx;
  color: $u-type-info;
  margin-top: 5px;
}

</style>